<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5学习整理</title>
</head>
<body>
<h1>1.video元素</h1>
<video id="video1" width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
<br>
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>

<script type="text/javascript">
    var myVideo=document.getElementById("video1");

    function playPause()
    {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }

    function makeBig()
    {
        myVideo.width=560;
    }

    function makeSmall()
    {
        myVideo.width=320;
    }

    function makeNormal()
    {
        myVideo.width=420;
    }
</script>

<h2>&lt;video&gt; 标签的属性</h2>
<table class="dataintable" border="1px" cellpadding="0" cellspacing="1">
    <tr>
        <th style="width:20%;">属性</th>
        <th style="width:16%;">值</th>
        <th>描述</th>
    </tr>
    <tr>
        <td class="html5_new">autoplay</td>
        <td>autoplay</td>
        <td>如果出现该属性，则视频在就绪后马上播放。</td>
    </tr>
    <tr>
        <td class="html5_new">controls</td>
        <td>controls</td>
        <td>如果出现该属性，则向用户显示控件，比如播放按钮。</td>
    </tr>
    <tr>
        <td class="html5_new">height</td>
        <td><i>pixels</i></td>
        <td>设置视频播放器的高度。</td>
    </tr>
    <tr>
        <td class="html5_new">loop</td>
        <td>loop</td>
        <td>如果出现该属性，则当媒介文件完成播放后再次开始播放。</td>
    </tr>
    <tr>
        <td class="html5_new">preload</td>
        <td>preload</td>
        <td><p>如果出现该属性，则视频在页面加载时进行加载，并预备播放。</p><p>如果使用 &quot;autoplay&quot;，则忽略该属性。</p></td>
    </tr>
    <tr>
        <td class="html5_new">src</td>
        <td><i>url</i></td>
        <td>要播放的视频的 URL。</td>
    </tr>
    <tr>
        <td class="html5_new">width</td>
        <td><i>pixels</i></td>
        <td>设置视频播放器的宽度。</td>
    </tr>
</table>





</body>
</html>